<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <!-- kendo ui css -->
    <!--  for table-->
<link href="${STATIC_URL}css/bootstrap.min.css" rel="stylesheet">
<link href="${STATIC_URL}css/kendo.common.min.css" rel="stylesheet">
<link href="${STATIC_URL}css/kendo.default.min.css" rel="stylesheet">
<link href="${STATIC_URL}css/font-awesome.css" rel="stylesheet">
<link href="https://magicbox.bkclouds.cc/static_api/v3/bk/css/bk.css?v=1.0.1" rel="stylesheet">
<script src="${STATIC_URL}js/jquery-1.10.2.min.js"></script>
<script src="https://magicbox.bkclouds.cc/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
<script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
<script src="${STATIC_URL}js/kendo.all.min.js"></script>
<script src="${STATIC_URL}js/bk.js"></script>

    <!-- font-awesome -->
    <!--蓝鲸提供的公用样式库 -->

    <link href="https://magicbox.bkclouds.cc/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">

    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <!-- Csrf -->
    <script src="${STATIC_URL}js/csrftoken.js"></script>

    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]><script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/html5shiv.min.js"></script><script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/respond.min.js"></script><![endif]-->
</head>

<body class="bg-white" data-bg-color="bg-white">
    <div class="king-page-box">
        <div class="king-container clearfix">
            <nav>
                <div class="king-header2 navbar navbar-blue king-horizontal-info f14">
                    <div class="nav-container">
                        <div class="navbar-header">
                            <button class="pull-right visible-xs navbar-toggle collapsed navbar-toggle-sm" type="button" data-toggle="collapse" data-target="#king-header2-navbar-collapse"> <i class="fa fa-fw fa-ellipsis-v">                    </i> </button>
                            <a class="navbar-brand" href="javascript:;" title="工具集">
                                <img src="#" alt="" class="logo" style="margin-top:-5px;"> </a>
                        </div>
                        <div class="navbar-collapse collapse" id="king-header2-navbar-collapse">
                            <ul class="nav navbar-nav navbar-left hidden-sm">
                                <li>
                                    <a href="">
                                        <span>文件上传</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span>知乎热门话题</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span>密码加密</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="${SITE_URL}calc/">
                                        <span>乘法计算器</span>
                                    </a>
                                </li>
                            </ul>
                            <ul class="nav navbar-nav navbar-right">
                                <li>
                                    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-cog">                            </i>
                                        <span class="ml10"> 管理配置 </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <span> admin </span>
                                        <span class="avatar">
                                            <img src="https://magicbox.bk.tencent.com/static_api/v3/components/horizontal_nav9/images/avatar.jpg"> </span>
                                    </a>
                                </li>
                                <li> <a href="javascript:void(0)">退出</a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
            <div class="container-fluid mb0 ">
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <div class="panel panel-success m5">
                            <div class="panel-heading"> 乘法计算器 </div>
                            <div class="panel-body p5">
                                <form class="form-horizontal">
                                    <div class="form-group clearfix ">
                                        <label class="col-sm-3 control-label bk-lh30 pt0">乘数：</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control bk-valign-top" id="multiplier" placeholder=""> </div>
                                    </div>
                                    <div class="form-group clearfix ">
                                        <label class="col-sm-3 control-label bk-lh30 pt0">被乘数：</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control bk-valign-top" id="multiplicand" placeholder=""> </div>
                                    </div>
                                    <div class="form-group clearfix">
                                        <div class="col-sm-9 col-sm-offset-3">
                                            <button type="button" class="king-btn mr10  king-success" id="mult_computer">计算</button>
                                            <button type="reset" class="king-btn king-default ">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>


                        <div class="panel panel-success m5">
                            <div class="panel-heading"> 计算结果 </div>
                            <div class="panel-body p5">
                                <div class="king-widget1 king-widget-success m0">
                                    <div class="king-widget2-content p25">
                                        <div class="king-counter king-counter-lg">
                                            <span class="king-counter-number" id="mult_result"></span>
                                            <div class="king-counter-label text-uppercase"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 设置面板Start -->
                                <!-- 设置面板End -->
                            </div>
                        </div>
                        <div class="panel panel-success m5">
                            <div class="panel-heading">计算记录</div>
                            <div class="panel-body p5">
                         <div id="example">
                            <div id="grid"></div>
                                <!-- 设置面板End -->
                            </div>
                                </div>
                        </div>
                    </div>
                    <div class="col-md-2">

                    </div>

                </div>
            </div>
        </div>
    </div>


      <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "${SITE_URL}",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                   url: crudServiceBaseUrl + "demo/",
                                   dataType: "json"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "update/",
                                    dataType: "json",
                                    method: "post"

                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                }
                            },
                            pageSize: 10,

                            schema: {
                                model: {
                                    id: "id",
                                    fields: {
                                        id:{ editable: false },
                                        multiplier: { type: "string", validation: { required: true, min: 1} },
                                        multiplicand: { type: "string" },
                                        mult_result: { type: "string", validation: { min: 0, required: false} },
                                        mult_time: { type: "string", validation: { min: 0, required: false} },
                                        mult_user: { type: "string", validation: { min: 0, required: false} }
                                    }
                                }
                            }
                        });

                    $("#grid").kendoGrid({

                        dataSource: dataSource,
                        resizable:true,
                        pageable: {
                                //pageSize: 5, //每页显示的记录数目,如果要显示分页，必须设置pageSize
                                input: true, //显示分页跳转输入框
                                refresh: true, //显示刷新",
                                info: true, //显示分页信息，如“显示条目 1 - 4 共 9”
                                previousNext: true, //隐藏“上一页”和“下一页”，
                                message: {
                                    //display: "当前是 第{0}条到第{1}条,一共 {2} 条数据记录", //自定义分页信息
                                    empty: "暂时没有数据", //配置没有数据时的提示信息
                                    first: "第一页",
                                    last: "最后一页",
                                    next: "下一页",
                                    previous: "上一页"
                                }
                            },
                        sortable: true,
                        selectable:'cell',
                        width:1400,
                        //height: 550,
                        toolbar: ["cancel","create"],
                        dataBound: function(){
                        var tbody = $("#grid tbody").html();
                        if(!tbody){
                            $($("#grid tbody").get(0)).html('<tr><td colspan="9" style="text-align: center">没有数据</td></tr>');
                        }
				        },
                        columns: [
                            { field: "id", title: "id",  width: "60px" },
                            { field: "multiplier", title: "乘数", format: "{0:c}", width: "60px" },
                            { field: "multiplicand", title: "被乘数",width: "60px" },
                            { field: "mult_result", title: "乘积", width: "60px" },
                            { field: "mult_time", title: "执行时间", width: "60px" },
                            { field: "mult_user", title: "执行人", width: "60px" },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "60px"}],
                        editable: "inline"
                    });
                });
            </script>

    <!-- delete raw
    <script type="text/javascript">
     /*  $(document).ready(function() {
        $("#table2_demo1").find(".btn-danger").parent('button').click(function() {
        //change the background color to red before removing
        $(this).css("background-color","#FF3700");
        $(this).fadeOut(400,
                function(){
        $(this).remove();
        });
        });
        }); */



     //  $('#table2_demo1 tr').click(function(){
     //           $(button).on('click', function(){
      //            $(this).children('input').val()
      //          });
                //if(confirm('确定要删除？')){


           // var result =  $("input[id=${i.id}]").val();
                             //   alert(result);

                   //$(this).css("background-color","#FF3700");
                    //$(this).fadeOut(400, function(){
                    //$(this).closest('tr').remove();
        //});
                   // $(this).closest('tr').remove();
               // }
            //});

    </script> -->






    <script type="text/javascript">
      $(function(){
    	$("#mult_computer").click(function(){
    		var multiplier = $("#multiplier").val();
    		var multiplicand = $("#multiplicand").val();
    		$.post("${SITE_URL}multiplication_computer/", {
    			'multiplier': multiplier,
    			'multiplicand': multiplicand
    		}, function(res){
                location.reload();
    			if(res.result){
    				$("#mult_result").html(res.mult_result);

    			}
    		}, 'json');

        });

    });

    </script>


</body>

</html>